<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Digital Roller</view>
			<view class="tui-page__desc">数字滚轮，数值变动时滚动效果</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-roller-box">
				<text>余额：</text>
				<tui-digital-roller :value="value"></tui-digital-roller>
			</view>
			<view class="tui-roller-box">
				<tui-digital-roller :value="value" color="#07c160" :size="60" :cellHeight="60" bold></tui-digital-roller>
			</view>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="changeVal(728.01)">改变数值：728.01</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="changeVal(1008.91)">改变数值：1008.91</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="changeVal('250.00')">改变数值：250.00</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="changeVal(666)">去掉小数点：666</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="changeVal('1,680.00')">带逗号：1,680.00</tui-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 888.88
			};
		},
		methods: {
			changeVal(num) {
				this.value = num;
			}
		}
	};
</script>

<style>
	.tui-roller-box {
		width: 100%;
		padding-bottom: 60rpx;
		text-align: center;
	}
</style>
